<!--
 * @Author: yangmy
 * @Date: 2022-03-15 14:12:16
 * @FileDescription: 超市最新价格
-->
<template>
  <div class="left-lower">
    <com-box :title="title">
      <loading v-show="loading" />
      <div class="Price-unite-time">
        <div class="time">{{ time }}</div>
      </div>
      <div style="width: 95%; margin: auto">
        <div class="Header">
          <span>{{ header.goodsName }}</span>
          <span>{{ header.avgPrice }}</span>
          <span>{{ header.avgPriceD2DSub }}</span>
          <span>{{ header.avgPriceD2D }}</span>
        </div>
        <div class="main">
          <el-scrollbar
            height="355px"
            ref="scrollbar"
            @scroll="handleScroll"
            @mouseover="stopScroll"
            @mouseout="startScroll"
          >
            <ul>
              <li
                v-for="(item, index) in CurrentPriceList"
                :key="index"
                @click="onChoice(item, index)"
                :style="{ background: item.background }"
              >
                <span
                  :class="item.goodsCode == categoryIndex ? 'name-box' : 'name'"
                >
                  {{ item.goodsName }}
                </span>
                <span>
                  <p v-if="item.avgPrice">{{ item.avgPrice }}</p>
                </span>
                <span
                  :class="[
                    'main-num',
                    'main-span',
                    item.avgPriceD2DSub && Number(item.avgPriceD2DSub) > 0
                      ? 'red'
                      : 'green'
                  ]"
                >
                  <p v-if="item.avgPriceD2DSub">{{ item.avgPriceD2DSub }}</p>
                  <p v-if="item.unit" class="main-unit">
                    {{ item.unit }}
                  </p>
                </span>
                <span
                  :class="[
                    'main-span',
                    item.avgPriceD2D && item.avgPriceD2D.indexOf('-') != -1
                      ? 'green'
                      : item.avgPriceD2D && parseFloat(item.avgPriceD2D) == '0'
                      ? 'green'
                      : 'red'
                  ]"
                >
                  <p
                    v-if="item.avgPriceD2D"
                    :class="parseFloat(item.avgPriceD2D) === 0 ? 'white' : ''"
                  >
                    {{ item.avgPriceD2D }}
                  </p>
                </span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
    </com-box>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  watch,
  ref
} from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
interface IMenuData {
  goodsName: string
  goodsCode: string
  avgPrice: string
  avgPriceTwo: string
  avgPriceThree: string
  avgPriceFour?: string
  avgPriceD2D: string
  avgPriceD2DTwo: string
  avgPriceD2DThree: string
  avgPriceD2DFour?: string
}
interface IState {
  timerFlag: boolean
  time: string
  title: string
  header: any
  loading: boolean
  CurrentPriceList: IMenuData[]
  categoryIndex: string
  carouselTimer: any
  timer: any
  getCurrentPrice: (val?: any) => void
}
export default defineComponent({
  name: 'leftLower',
  props: {
    parameters: {
      type: Object,
      default: () => {
        return {
          adCode: '',
          classId: ''
        }
      }
    },
    goodsId: {
      type: String,
      default: ''
    }
  },
  components: {
    comBox,
    loading
  },
  setup(props, { emit }) {
    const state: IState = reactive({
      timerFlag: true,
      time: '',
      title: '',
      header: {}, //表头
      CurrentPriceList: [],
      loading: false,
      categoryIndex: '',
      carouselTimer: null,
      timer: null,
      getCurrentPrice: (val) => {
        state.loading = true
        httpRequest
          .get({
            url: 'M3P2zxjg',
            params: {
              adcode: val.adcode,
              classId: val.classId === 'null' ? '' : val.classId
            }
          })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.time = res.time
              state.header = res.map
              state.CurrentPriceList = res.data
              state.categoryIndex = res.data[0].goodsCode
              emit('change', res.data[0].goodsName, res.data[0].goodsCode)
            }
            state.loading = false
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })

    const scrollbar = ref()
    let curScrollTop = 0
    onMounted(() => {
      onScroll()
    })
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          curScrollTop++
          scrollbar.value?.setScrollTop(curScrollTop)
        }
        if (
          scrollbar.value &&
          curScrollTop - scrollbar.value.wrap$.scrollTop > 1
        ) {
          curScrollTop = 0
        }
      }, 50)
    }

    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      if (scrollbar.value) {
        curScrollTop = scrollbar.value.wrap$.scrollTop
      }
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    const onChoice = (data: any) => {
      emit('change', data.goodsName, data.goodsCode)
      state.categoryIndex = data.goodsCode
    }
    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })
    watch(
      () => props.parameters,
      (val) => {
        state.getCurrentPrice(val)
      },
      {
        deep: true
      }
    )
    watch(
      () => props.goodsId,
      (val) => {
        state.categoryIndex = val
      }
    )
    return {
      ...toRefs(state),
      onChoice,
      stopScroll,
      startScroll,
      handleScroll,
      scrollbar
    }
  }
})
</script>
<style lang="less" scoped>
.left-lower {
  margin-top: 15px;
  height: 486px;
  overflow: hidden;
  ::v-deep(.slot-box) {
    padding-bottom: 20px;
  }
}
// 单位
.Price-unite-time {
  font-family: 'Microsoft YaHei';
  color: rgba(227, 246, 255, 0.902);
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.714;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .unite {
    margin-left: 18px;
    p {
      font-size: 14px;
      text-align: left;
      color: rgb(70, 237, 232);
      position: relative;
    }
  }
  .time {
    align-content: center;
    margin-right: 18px;
    font-size: 14px;
    color: rgb(70, 237, 232);
  }
}
.main {
  height: calc(100% - 46px);
  // .main-num {
  // line-height: 0px;
  .main-unit {
    color: #fff;
    white-space: nowrap;
    transform: scale(0.8);
    font-weight: 500;
    // position: relative;
    // bottom: -17px;
  }
  // }
}
ul {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  li {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    span {
      width: 20%;
      text-align: center;
    }
    p {
      font-size: 14px;
      font-family: 'Microsoft YaHei';
      color: #fff;
      font-weight: bold;
    }
    .red {
      font-size: 16px;
      font-weight: 500;
      color: rgb(255, 38, 38);
    }
    .green {
      font-weight: 500;
      font-size: 16px;
      color: #02ffb5;
    }
    .name-box {
      font-size: 14px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 192, 111);
      font-weight: bold;
    }

    .name {
      font-size: 14px;
      font-family: 'Microsoft YaHei';
      color: #fff;
      font-weight: bold;
    }
  }
}

.Header {
  background-color: rgba(33, 122, 255, 0.4) !important;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 10px;
  span {
    width: 20%;
    white-space: pre-line;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
    color: rgba(160, 220, 255, 0.902);
    font-weight: bold;
    line-height: 1.714;
    text-align: center;
  }
}
li:nth-child(even) {
  height: 54px;
  background-color: rgba(33, 122, 255, 0.1);
}
li:nth-child(odd) {
  width: 100%;
  height: 54px;
}

::v-deep(.com-box .slot-box) {
  height: calc(100% - 55px);
}
.red {
  p {
    font-size: 16px;
    font-weight: 550;
    color: rgb(255, 38, 38);
  }
}
.green {
  p {
    font-weight: 550;
    font-size: 16px;
    // color: #02ffb5;
    color: rgb(66, 255, 0);
  }
}
.white {
  color: #fff;
}
</style>
